/**
* @description : 预警提醒列表
* @descriptionDetail : 预警提醒列表
* @copyright : 浙江烟草
* @author : dw
* @create : 2022-12-05 15:29:08
*/
<template>
	<view class="page">
		<!-- #ifdef H5-ONLY -->
		<theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
			<view class="nav-right-icon">
				<u-icon name="list" color="#FFF" size="38" style="margin: 0 14rpx 0 6rpx" @tap="selectOrg"></u-icon>
			</view>
		</theme-navbar>
		<!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
		<view class="content u-page">
			<me-table :i="0" :index="0" :load-data="loadData" :height="getListViewHeight()" :init-load="false" ref="mescrollItem0">
				<view slot-scope="d" class="list-lay">
					<view class="lt-root" @tap="itemClick(d.data)">
						<view class="content-nt-lay">
							<view class="content-title-lay" style="padding-bottom: 22rpx;">
								<view class="content-title">
									{{ d.data.warnTypeCn }}
								</view>
								<view class="content-title-words-title" style="text-align:right;">
									<u-tag style="flex-shrink: 0;" :spStyle="getSpStyle(d.data)" mode="dark" shape="circle" :text="d.data.warnProcessStatusCn"></u-tag>
								</view>
							</view>
							<view class="content-title-lay" style="padding-bottom: 24rpx;border-bottom: 1px solid #DFE0E1;">
								<view class="content-title-words-title" style="text-align:right;color:#717579">
									许可证状态：
									<view style="color:#393B3D">
										{{ d.data.licNoStatusCn }}
									</view>
								</view>
								<view class="content-title-words-title day-sty">
									剩余天数：
									<view style="color:#D11211">
										{{ d.data.surplusDays }}
									</view>
								</view>
							</view>
							<view class="content-sub-title-lay">
								<view class="content-title-words">
									<view class="content-title-words-title" style="color:#717579">
										负责人：
									</view>
									<view style="color:#393B3D">
										{{ d.data.managerName }} &nbsp; {{ d.data.licNo }}
									</view>
								</view>
							</view>
							<view class="content-sub-title-lay">
								<view class="content-title-words">
									<view class="content-title-words-title fl-shark" style="color:#717579">
										企业（字号）名称：
									</view>
									<view style="color:#393B3D">
										{{ d.data.companyName }}
									</view>
								</view>
							</view>
							<view class="content-sub-title-lay">
								<view class="content-title-words" style="line-height: 44rpx">
									<view class="content-title-words-title fl-shark" style="color:#717579">
										经营地址：
									</view>
									<view style="color:#393B3D">
										{{ d.data.businessAddr }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</me-table>
		</view>
		<u-popup v-model="orgShow" width="80%" mode="right">
			<view class="cearch_title">
				查询条件
			</view>
			<u-form :model="orgForm" label-position="top" label-width="auto" style="padding: 80rpx 32rpx 160rpx 32rpx" ref="uForm">
				<u-form-item label="负责人姓名:" prop="managerName">
					<u-input placeholder="请输入负责人姓名" v-model="orgForm.managerName" />
				</u-form-item>
				<u-form-item label="预警类型:" prop="warnType">
					<dic-input :keyWord="$u.dic.DIC_KEYS.L_WARN_TYPE" :dicCode="orgForm.warnType" :border="ifborder" inputAlign="left" type="select" :select-open="dicSelectOpen('reason',$u.dic.DIC_KEYS.L_WARN_TYPE)" placeholder="请选择" v-model="orgForm.warnTypeName" @changeInputModelData="(name)=>{$set(orgForm, 'warnTypeName', name)}" @click="showDic($u.dic.DIC_KEYS.L_WARN_TYPE,orgForm.warnType,'reason')" />
				</u-form-item>
				<u-form-item label="许可证号:" prop="licNo">
					<u-input placeholder="请输入许可证号" v-model="orgForm.licNo" />
				</u-form-item>
				<u-form-item label="发证日期:">
					<u-input placeholder="请选择发证日期" :custom-style="pointerStyle" :disabled="true" v-model="orgForm.rangeDate" @click="licnDtae=true" />
				</u-form-item>
				<u-form-item label="许可证状态:" prop="licNoStatus">
					<dic-input :keyWord="$u.dic.DIC_KEYS.L_LIC_STATUS" :dicCode="orgForm.licNoStatus" :border="ifborder" inputAlign="left" type="select" :select-open="dicSelectOpen('reason',$u.dic.DIC_KEYS.L_LIC_STATUS)" placeholder="请选择" v-model="orgForm.licNoStatusName" @changeInputModelData="(name)=>{$set(orgForm, 'licNoStatusName', name)}" @click="showDic($u.dic.DIC_KEYS.L_LIC_STATUS,orgForm.licNoStatus,'reason')" />
				</u-form-item>
				<u-form-item label="企业名称:" prop="companyName">
					<u-input placeholder="请输入企业名称" v-model="orgForm.companyName" />
				</u-form-item>
				<u-form-item label="经营地址:" prop="businessAddr">
					<u-input placeholder="请输入经营地址" v-model="orgForm.businessAddr" />
				</u-form-item>
				<u-form-item label="到期提醒:" prop="warnRemindName" right-icon="arrow-down-fill" :right-icon-style="iconStyle">
					<u-input placeholder="请选择" :custom-style="pointerStyle" :disabled="true" v-model="orgForm.warnRemindName" @click="expirationReminder=true" />
				</u-form-item>
				<u-form-item label="距到期天数:" prop="remindDays" v-show="orgForm.warnRemindName == '提醒'">
					<dic-input :keyWord="$u.dic.DIC_KEYS.L_REMINDER_DUE_DAYS" :dicCode="orgForm.remindDays" :border="ifborder" inputAlign="left" type="select" :select-open="dicSelectOpen('remindDays',$u.dic.DIC_KEYS.L_REMINDER_DUE_DAYS)" placeholder="请选择" v-model="orgForm.remindDaysName" @changeInputModelData="(name)=>{$set(orgForm, 'remindDaysName', name)}" @click="showDic($u.dic.DIC_KEYS.L_REMINDER_DUE_DAYS,orgForm.remindDays,'remindDays')" />
				</u-form-item>
				<u-form-item label="处理状态:" prop="warnProcessStatusName" right-icon="arrow-down-fill" :right-icon-style="iconStyle">
					<u-input placeholder="请选择" :custom-style="pointerStyle" :disabled="true" v-model="orgForm.warnProcessStatusName" @click="processStatus=true" />
				</u-form-item>
			</u-form>
			<view class="submit-btns btn-other-cls">
				<u-button plain class="del" type="primary" @click="close">
					重置
				</u-button>
				<u-button class="mit" type="primary" @click="selectChange">
					确定
				</u-button>
			</view>
		</u-popup>
		<u-calendar mode="range" max-date="2099-12-31" v-model="licnDtae" @change="handlerLicnDtae"></u-calendar>
		<!-- 下拉选择用 -->
		<dic-choice :keyWord="dicKeyWords" :currentSelect="dicCurrentSelect" v-model="dicShow" @confirm="selectDicConfirm"></dic-choice>
		<u-select mode="single-column" :list="reminderShowList" v-model="expirationReminder" @confirm="unitConfirm"></u-select>
		<u-select mode="single-column" :list="processStatusList" v-model="processStatus" @confirm="statusConfirm"></u-select>
	</view>
</template>

<script>
	import meTable from '@/components/me-table.vue';
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import queryQueryService from "@/service/query/query.service";
	// import searchCriteria from "./common/searchCriteria";
	import {
		PROCESS_STATUS,
	} from "@/service/query/mapping/enum.js";
	import DicInput from "@/components/dic_input.vue";
	import DicChoice from "@/components/dic_choice.vue";
	import fabButton from '@/components/uni-fab.vue';

	const sysCodeColors = {
		"1": {
			color: "#01A79A",
			borderColor: "#01A79A",
			backgroundColor: "#C0ECE2",
		},
		"0": {
			color: "#0079F2",
			borderColor: "#0079F2",
			backgroundColor: "#E0ECFF",
		},
	};
	export default {
		components: {
			meTable,
			DicInput,
			DicChoice,
			fabButton
		},
		mixins: [MescrollMoreMixin, ],
		data() {
			return {
				searchKey: "",
				user: this.$storage.get(this.$rp.common.USER),
				orgShow: false,
				searchObj: {}, // 返回过来查询对象
				lab_style: {
					fontWeight: 500,
					color: this.$theme.u_main_color,
					fontSize: '.75rem',
				},
				iconStyle: {
					color: '#c0c4cc',
				},
				orgForm: {
					decideStartDate: '',
					decideEndDate: '',
					rangeDate: '',
					warnType: '',
					licNoStatus: '',
					warnRemind: '',
					warnProcessStatus: '',
					companyName: '',
					businessAddr: '',
					managerName: '',
					licNo: '',
					remindDays: "",
				},
				dateRange: false,
				// dic_select 是否显示
				dicShow: false,
				// dic 关键字
				dicKeyWords: "",
				// dic 当前选择项
				dicCurrentSelect: "",
				dicType: "",
				// 输入框是否有border
				ifborder: false,
				expirationReminder: false,
				processStatus: false,
				licnDtae: false,
				reminderShowList: [{
					value: '',
					label: '全部',
				}, {
					value: '02',
					label: '提醒',
				}, {
					value: '01',
					label: '到期',
				}, ],
				processStatusList: [{
					value: '0',
					label: '未处理',
				}, {
					value: '1',
					label: '已处理',
				}, ],
				fContent: [{
					iconPath: require('@/static/sou.png'),
					selectedIconPath: require('@/static/sou.png'),
					text: '筛选',
					active: false,
				}],
				// h5端部分浏览器input设置disabled后点击事件失效 2023-10-29 fsx start
				pointerStyle: {
				  marginRight: "5px",
					pointerEvents: "none !important"
				},
				// h5端部分浏览器input设置disabled后点击事件失效 2023-10-29 fsx end
			};
		},
		onLoad() {},
		mounted() {
			this.setRightBtns();
		},
		methods: {
			setRightBtns() {
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight("筛选", () => {
					this.selectOrg();
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.selectOrg();
				}
			},
			getSpStyle(it) {
				if (it.warnProcessStatus == PROCESS_STATUS.UNHANDLED) {
					return sysCodeColors[it.warnProcessStatus] || {};
				} else {
					return sysCodeColors[it.warnProcessStatus] || {};
				}
			},
			getListViewHeight() {
				let p = this.$u.sys().windowHeight - 44 - 48 - uni.upx2px(10) - this.$u.sys().statusBarHeight;
				// #ifdef H5-DINGDING || H5-WECHAT
				p = this.$u.sys().windowHeight - uni.upx2px(10) - 48 - this.$u.sys().statusBarHeight;
				// #endif
				return p + "px";
			},
			updateBackState(param) {
				this.getMescroll(0).triggerDownScroll();
			},
			selectOrg() {
				this.orgShow = true;
				this.setRouteParam(this.searchObj);
			},
			// 用的工作待办接口筛选数据，不用做分页查询，默认多查一批数据出来
			loadData(page) {
				if (!this.searchObj.warnProcessStatus) {
					this.searchObj.warnProcessStatus = '0'
				}
				let param = {
					page: page.num,
					limit: page.size,
					orgUuid: this.user.user.org.orgUuid,
					businessAddr: this.searchObj.businessAddr,
					companyName: this.searchObj.companyName,
					decideEndDate: this.searchObj.decideEndDate,
					decideStartDate: this.searchObj.decideStartDate,
					licNo: this.searchObj.licNo,
					licNoStatus: this.searchObj.licNoStatus,
					managerName: this.searchObj.managerName,
					warnProcessStatus: this.searchObj.warnProcessStatus,
					warnRemind: this.searchObj.warnRemind,
					warnType: this.searchObj.warnType,
					remindDays: this.searchObj.remindDays,
				};
				// param
				console.log(param)
				return new Promise((resolve) => {
					queryQueryService.WarningList(param).then(res => {
						if (res.success) {
							resolve({
								count: res.count,
								data: [...res.data, ],
							});
						} else {
							resolve({
								count: 0,
								data: [],
							})
						}
					}).catch(err => {
						resolve({
							count: 0,
							data: [],
						});
					});
				})
			},
			itemClick(item) {
				this.setRouteParam(item);
				this.$u.route("/pages/query/earlyWarning/examinWarn");
			},
			selectChange() {
				this.orgShow = false;
				this.searchObj = this.orgForm;
				this.getMescroll(0).triggerDownScroll();

			},
			handlerLicnDtae(d) {
				this.orgForm.decideStartDate = d.startDate;
				this.orgForm.decideEndDate = d.endDate;
				this.orgForm.rangeDate = d.startDate + "至" + d.endDate;
				// this.$refs["mescrollItem0"].refresh();
			},
			dicSelectOpen(type, keyWords) {
				if (type == this.dicType) {
					if (this.dicKeyWords == keyWords && this.dicShow) {
						return true;
					}
					return false;
				}
			},
			showDic(key, cur, type) {
				if (this.dicShow) return;
				this.dicKeyWords = key;
				this.dicCurrentSelect = cur;
				this.dicShow = true;
				this.dicType = type;
			},
			selectDicConfirm(e) {
				if (this.dicKeyWords == this.$u.dic.DIC_KEYS.L_WARN_TYPE) { // 未办证原因
					this.orgForm.warnTypeName = e[0].label;
					this.orgForm.warnType = e[0].extra.bcbCode;
				} else if (this.dicKeyWords == this.$u.dic.DIC_KEYS.L_LIC_STATUS) { // 许可证状态
					this.orgForm.licNoStatusName = e[0].label;
					this.orgForm.licNoStatus = e[0].extra.bcbCode;
				} else if (this.dicKeyWords == this.$u.dic.DIC_KEYS.L_REMINDER_DUE_DAYS) { // 距到期天数
					this.orgForm.remindDaysName = e[0].label;
					this.orgForm.remindDays = e[0].extra.bcbCode;
				}
			},
			unitConfirm(e) {
				this.orgForm.warnRemindName = e[0].label
				this.orgForm.warnRemind = e[0].value
				if (this.orgForm.warnRemind == '01') {
					this.orgForm.remindDaysName = "";
					this.orgForm.remindDays = "";
				}
			},
			statusConfirm(e) {
				this.orgForm.warnProcessStatusName = e[0].label
				this.orgForm.warnProcessStatus = e[0].value
			},
			close() {
				this.orgForm = {};
			},
		},
	}
</script>

<style scoped lang="scss">
	.page {
		padding: 0;
	}

	.content {
		background-color: #f3f4f5;
		min-height: 100%;
	}

	.cearch_title {
		background-color: #F3F4F5;
		width: 100%;
		height: 82rpx;
		font-size: 32rpx;
		font-weight: 600;
		padding: 22rpx 0 21rpx 32rpx;
		z-index: 999;
		position: fixed;
	}

	.list-lay {
		border-bottom: 2rpx solid $u-border-color;
		margin: 11px 32rpx;
		background-color: #fff;
		border-radius: 32rpx;
	}

	.lt-root {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		width: 100%;
		align-items: flex-start;
		align-content: center;
		margin-left: 10rpx;
		padding: 32rpx 32rpx 32rpx 24rpx;
	}

	.left-tag {
		padding: 10rpx 10rpx;
		border-radius: 50rpx;
		flex-shrink: 0;
		background-color: #2889db;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}

	.content-nt-lay {
		flex: 1;
	}

	.content-title-lay {
		display: inline-flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		align-items: center;
	}

	.content-title {
		font-weight: 600;
		font-size: 32rpx;
		color: #393B3D;
	}

	.content-title-words {
		font-size: 26rpx;
		color: $u-main-color;
		display: flex;
		flex-direction: row;
	}

	.content-title-words-title {
		display: flex;
		color: #adadad;
	}

	.content-sub-title-lay {
		margin-top: 16rpx;
		font-size: 26rpx;
		display: inline-flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		color: $cm-form-subtitle-color;
	}

	.content-sub-title {
		color: $cm-form-subtitle-color;
		font-size: $cm-form-item-label-font-size;
	}

	.fl-shark {
		flex-shrink: 0;
		;
	}

	.day-sty {
		font-weight: 600;
		text-align: right;
		color: #D11211;
	}
</style>
